<template>
	<div class="content-left">
		<div class="area">
			<div class="title">
				<i class="icon"></i>
				<a href="javascript:;" class="left">热门推荐</a>
				<div class="list">
					<a>华语 <i></i></a>
					<a>流行 <i></i></a>
					<a>摇滚 <i></i></a>
					<a>民谣 <i></i></a>
					<a>电子 <i></i></a>
				</div>
				<a href="javascript:;" class="right">更多 <i></i></a>
			</div>
			<ul class="playlistList">
				<li v-for="item in PlayList" :key="item.id">
					<div class="playlistImg">
						<img :src="item.picUrl" alt="" />
						<a href="javascript:;" :title="item.name" class="msk"></a>
						<div class="bottom">
							<a href="javascript:;" class="icon-play"></a>
							<span class="icon-headset"></span>
							<span class="icon-title"
								>{{ parseInt(item.playCount / 10000) }}万</span
							>
						</div>
					</div>
					<p class="playlistTitle">
						<a href="javascript:;" :title="item.name">{{ item.name }}</a>
					</p>
				</li>
			</ul>
		</div>
		<div class="area">
			<div class="title">
				<i class="icon"></i>
				<a href="javascript:;" class="left">新碟上架</a>
				<a href="javascript:;" class="right">更多 <i></i></a>
			</div>
			<DiscBanner></DiscBanner>
		</div>
		<div class="area">
			<div class="title">
				<i class="icon"></i>
				<a href="javascript:;" class="left">榜单</a>
				<a href="javascript:;" class="right">更多 <i></i></a>
			</div>
			<div class="songLists">
				<dl class="songList">
					<dt class="top">
						<div class="img">
							<img src="@/image/bsb.jpg" alt="" />
							<a href="javascript:;" class="msk" title="飙升榜"></a>
						</div>
						<div class="til">
							<a href="javascript:;" title="飙升榜">
								<h3>飙升榜</h3>
							</a>
							<div>
								<a href="javascript:;" class="til_icon icon_1" title="播放"></a>
								<a href="javascript:;" class="til_icon icon_2" title="收藏"></a>
							</div>
						</div>
					</dt>
					<dd>
						<ol>
							<li v-for="(bsbItem, index) in bsb" :key="bsbItem.id">
								<span :class="[index + 1 <= 3 ? 'no no-top' : 'no']">
									{{ index + 1 }}
								</span>
								<a
									href="javascript:;"
									@click="paly"
									:data-id="bsbItem.id"
									class="name"
									:title="bsbItem.name"
									>{{ bsbItem.name }}</a
								>
								<div class="oper">
									<a
										href="javascript:;"
										class="icon_item item_1"
										@click="paly"
										:data-id="bsbItem.id"
										title="播放"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_2"
										title="添加到播放列表"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_3"
										title="收藏"
									></a>
								</div>
							</li>
						</ol>
						<div class="more">
							<a href="javascript:;"> 查看全部> </a>
						</div>
					</dd>
				</dl>
				<dl class="songList">
					<dt class="top">
						<div class="img">
							<img src="@/image/xgb.jpg" alt="" />
							<a href="javascript:;" class="msk" title="新歌榜"></a>
						</div>
						<div class="til">
							<a href="javascript:;" title="新歌榜">
								<h3>新歌榜</h3>
							</a>
							<div>
								<a href="javascript:;" class="til_icon icon_1" title="播放"></a>
								<a href="javascript:;" class="til_icon icon_2" title="收藏"></a>
							</div>
						</div>
					</dt>
					<dd>
						<ol>
							<li v-for="(xgbItem, index) in xgb" :key="xgbItem.id">
								<span :class="[index + 1 <= 3 ? 'no no-top' : 'no']">
									{{ index + 1 }}
								</span>
								<a
									href="javascript:;"
									@click="paly"
									:data-id="xgbItem.id"
									class="name"
									:title="xgbItem.name"
									>{{ xgbItem.name }}</a
								>
								<div class="oper">
									<a
										href="javascript:;"
										@click="paly"
										:data-id="xgbItem.id"
										class="icon_item item_1"
										title="播放"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_2"
										title="添加到播放列表"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_3"
										title="收藏"
									></a>
								</div>
							</li>
						</ol>
						<div class="more">
							<a href="javascript:;"> 查看全部> </a>
						</div>
					</dd>
				</dl>
				<dl class="songList">
					<dt class="top">
						<div class="img">
							<img src="@/image/ycb.jpg" alt="" />
							<a href="javascript:;" class="msk" title="原创榜"></a>
						</div>
						<div class="til">
							<a href="javascript:;" title="原创榜">
								<h3>原创榜</h3>
							</a>
							<div>
								<a href="javascript:;" class="til_icon icon_1" title="播放"></a>
								<a href="javascript:;" class="til_icon icon_2" title="收藏"></a>
							</div>
						</div>
					</dt>
					<dd>
						<ol>
							<li v-for="(ycbItem, index) in ycb" :key="ycbItem.id">
								<span :class="[index + 1 <= 3 ? 'no no-top' : 'no']">
									{{ index + 1 }}
								</span>
								<a
									href="javascript:;"
									@click="paly"
									:data-id="ycbItem.id"
									class="name"
									:title="ycbItem.name"
								>
									{{ ycbItem.name }}
								</a>
								<div class="oper">
									<a
										href="javascript:;"
										class="icon_item item_1"
										title="播放"
										:data-id="ycbItem.id"
										@click="paly"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_2"
										title="添加到播放列表"
									></a>
									<a
										href="javascript:;"
										class="icon_item item_3"
										title="收藏"
									></a>
								</div>
							</li>
						</ol>
						<div class="more">
							<a href="javascript:;"> 查看全部> </a>
						</div>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</template>

<script>
import DiscBanner from "./DiscBanner";
export default {
	name: "RecommendedLeft",
	components: {
		DiscBanner,
	},
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { getPlayList, getSongLists } from "@/api/Recommended";
import { useRouter } from "vue-router";

const router = useRouter();

const PlayList = ref([]);

const bsb = ref([]);
const xgb = ref([]);
const ycb = ref([]);

onMounted(() => {
	GetPlayList();
	GetSongLists();
});

const GetPlayList = async () => {
	const data = await getPlayList();
	PlayList.value = data.result.splice(0, 8);
};

const GetSongLists = async () => {
	const bsbdata = await getSongLists(3);
	bsb.value = bsbdata.playlist.tracks.splice(0, 10);
	const xgbdata = await getSongLists(0);
	xgb.value = xgbdata.playlist.tracks.splice(0, 10);
	const ycbdata = await getSongLists(2);
	ycb.value = ycbdata.playlist.tracks.splice(0, 10);
};

const paly = (e) => {
	const id = e.target.dataset.id;
	router.push({ path: "/music", query: { id: id } });
};
</script>

<style lang="less" scoped>
.content-left {
	width: calc(100% - 250px);
	box-sizing: border-box;
	padding: 20px 20px 40px;
	.area {
		overflow: hidden;
		margin-bottom: 35px;
		.title {
			box-sizing: border-box;
			width: 100%;
			height: 33px;
			line-height: 33px;
			padding: 0 10px 0 0;
			border-bottom: 2px solid #c10d0c;
			position: relative;
			overflow: hidden;
			.icon {
				display: inline-block;
				width: 35px;
				height: 35px;
				float: left;
				background: url(@/image/index.png) no-repeat -225px -156px;
			}
			.left {
				float: left;
				font-size: 20px;
				font-weight: normal;
				line-height: 28px;
				color: #000;
			}
			.list {
				display: inline-block;
				margin: 0 0 0 20px;
				a {
					display: inline-block;
					color: #666;
					i {
						padding-left: 10px;
						margin-right: 10px;
						border-right: 1px solid #ccc;
					}
				}
				a:hover {
					text-decoration: underline;
				}
				a:last-child {
					i {
						display: none;
					}
				}
			}
			.right {
				float: right;

				i {
					display: inline-block;
					width: 12px;
					height: 12px;
					background: url(@/image/index.png) no-repeat -2px -238px;
				}
			}
		}
		.playlistList {
			margin: 20px 0 0 -42px;
			li {
				float: left;
				width: 140px;
				height: 204px;
				padding: 0 0 30px 42px;
				.playlistImg {
					width: 140px;
					height: 140px;
					position: relative;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}

					.bottom {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 27px;
						background: url(@/image/coverall.png) no-repeat;
						background-position: 0 -537px;
						color: #ccc;
						a {
							position: absolute;
							right: 10px;
							bottom: 5px;
							width: 16px;
							height: 17px;
							background-position: 0 0;
							background: url(@/image/iconall.png) no-repeat;
						}
						.icon-headset {
							float: left;
							width: 14px;
							height: 11px;
							margin: 9px 5px 9px 10px;
							background: url(@/image/iconall.png) no-repeat;
							background-position: 0 -24px;
						}
						.icon-title {
							float: left;
							margin: 7px 0 0 0;
						}
					}
				}
				.playlistTitle {
					margin: 8px 0 3px;
					font-size: 14px;
					a {
						display: inline-block;
						max-width: 100%;
						vertical-align: middle;
					}
				}
			}
		}

		.msk {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url(@/image/coverall.png) no-repeat;
			background-position: 0 0;
		}

		.songLists {
			height: 472px;
			margin-top: 20px;
			padding-left: 1px;
			background: url(@/image/index_bill.png) no-repeat;
			overflow: hidden;
			.songList {
				float: left;
				width: 230px;
				.top {
					height: 100px;
					padding: 20px 0 0 19px;
					overflow: hidden;
					.img {
						width: 80px;
						height: 80px;
						position: relative;
						float: left;
						img {
							width: 100%;
						}
						.msk {
							background-position: -145px -57px;
						}
					}
					.til {
						float: left;
						width: 116px;
						margin: 6px 0 0 10px;
						a {
							cursor: pointer;
							color: #000;
						}
						a:hover {
							text-decoration: underline;
						}
						& > div {
							margin-top: 10px;
							.til_icon {
								display: inline-block;
								width: 22px;
								height: 22px;
								margin-right: 10px;
								background: url(@/image/index.png) no-repeat;
							}
							.icon_1 {
								background-position: -267px -205px;
							}
							.icon_2 {
								background-position: -300px -205px;
							}
						}
					}
				}
				& > dd {
					ol {
						height: 319px;
						margin-left: 50px;
						line-height: 32px;
						li {
							height: 32px;
							.no {
								float: left;
								position: relative;
								width: 35px;
								height: 32px;
								margin-left: -35px;
								text-align: center;
								color: #666;
								font-size: 16px;
							}
							.no-top {
								color: #c10d0c;
							}
							.name {
								float: left;
								width: 140px;
								height: 32px;
								color: #000;
							}
							.name:hover {
								text-decoration: underline;
							}
							.oper {
								display: none;
								float: right;
								width: 82px;
								margin-top: 7px;
								.icon_item {
									float: left;
									width: 17px;
									height: 17px;
									margin-right: 10px;
									background: url(@/image/index.png) no-repeat 0 9999px;
								}
								.item_1 {
									background-position: -267px -268px;
								}
								.item_1:hover {
									background-position: -267px -288px;
								}
								.item_2 {
									margin: 2px 6px 0 0;
									background: url(@/image/icon.png) no-repeat 0 9999px;
									background-position: 0 -700px;
								}
								.item_2:hover {
									background-position: -22px -700px;
								}
								.item_3 {
									background-position: -297px -268px;
								}
								.item_3:hover {
									background-position: -297px -288px;
								}
							}
						}
						li:hover .oper {
							display: block;
						}
						li:hover {
							.name {
								width: 95px !important ;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
					.more {
						clear: both;
						height: 32px;
						margin-right: 32px;
						text-align: right;
						line-height: 32px;
						a {
							color: #000;
						}
					}
				}
			}
			.songList:last-child {
				width: 227px;
			}
		}
	}
}
</style>
